<template>
  <div class="com-content">
    <div style="display: flex;justify-content: center;align-items: center;" @click="handlePreview(file)">{{txt}}</div>
    <j-modal title="预览" :width="800" :visible="previewVisible" switchFullscreen @ok="privacyDialogShow=true" @toggleFullscreen="toggleFullscreen" 
      @cancel="handleCancel" 
      :okButtonProps="{ class:{ 'jee-hidden': disableSubmit1 } }"
      :cancelButtonProps="{ class:{ 'jee-hidden': disableSubmit1 } }"
      okText="">
      <div class="scroll-view" style="width: 100%;overflow-y:scroll;" :style="{height:is_full?'100%':'600px'}">
        <template v-if="previewType === 'image'">
          <!-- <img alt="example" style="width: 100%" :src="previewImage" /> -->
					<img-preview :url="previewImage" ></img-preview>
        </template>
        <template v-else>
          <iframe :src="previewImage" frameborder="0" scrolling="no" id="bi_iframe" @load="adjustIframe"
            style="position: absolute; top: 55px; left: 0px"></iframe>
        </template>
      </div>
    </j-modal>
  </div>
</template>

<script>
	import 'viewerjs/dist/viewer.css'; //图片预览样式
	import {component as Viewer} from "v-viewer"; //图片预览组件
	import { api as viewerApi } from "v-viewer";
  const FILE_TYPE_ALL = "all";
  const FILE_TYPE_IMG = "image";
  const FILE_TYPE_TXT = "file";
  import base from '@/utils/base64.js';
  import imgPreview from "@/components/yzjt/imgPreview.vue";
  export default {
    name: 'imgsPreview',
	components: {
		imgPreview
	},
    data() {
      return {
        //预览图片
        previewVisible: false,
        disableSubmit1: true,
        previewImage:'',
        is_full:false,
      }
    },
    props: {
      file: {
        type: Object,
        default: () => ({
        })
      },
      txt:{
        type: String,
        default: "文件预览"
      },
      imgW: {
        type: String,
        default: ""
      },
      imgH: {
        type: String,
        default: ""
      },
      fileType: {
        type: String,
        required: false,
        default: FILE_TYPE_ALL
      },
    },
    created() {
      
    },
    methods:{
      toggleFullscreen(record){
        this.is_full = record;
      },
      adjustIframe() {
        var ifm = document.getElementById("bi_iframe");
        ifm.height = document.documentElement.clientHeight;
        ifm.width = '100%';
      },
      //字符粗转数组
      arrayImgs(imgUrl){
      	let lists = [];
      	lists = imgUrl.split(',');
      	return lists
      },
      handlePreview(file) {
        console.log(222,file)
        let _self = this;
        if (this.fileType === FILE_TYPE_IMG) {
          /* this.previewImage = file.fileUrl || file.informationUrl;
          this.previewVisible = true; */
					let iii = 0;
					let imgs = [];
					let row = {
						src:file.fileUrl || file.informationUrl,
						source:file.fileUrl || file.informationUrl,
						id:1
					}
					imgs.push(row);
					const $viewer = viewerApi({
						options: {
							toolbar: true,
							url: 'source',
							initialViewIndex: iii
						},
						images: imgs
					})
        } else {
          const fileType = this.matchFileType(file.fileUrl || file.informationUrl);
          this.previewType = fileType;
          if (fileType === 'image') {
            /* this.previewImage = file.fileUrl || file.informationUrl;
            this.previewVisible = true; */
			let iii = 0;
			let imgs = [];
			let row = {
				src:file.fileUrl || file.informationUrl,
				source:file.fileUrl || file.informationUrl,
				id:1
			}
			imgs.push(row);
			const $viewer = viewerApi({
				options: {
					toolbar: true,
					url: 'source',
					initialViewIndex: iii
				},
				images: imgs
			})
          } else {
            this.$nextTick(()=>{
              let base64 = new base;
              let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(base64.encode(file.fileUrl || file.informationUrl));//encodeURIComponent(base64.encode(file.url))
             // _self.previewImage = url;
              window.open(url)
              //let resultNew = encodeURIComponent(file.url)
              //window.open("https://view.officeapps.live.com/op/view.aspx?src="+ resultNew);
              //window.open("https://file.kkview.cn/onlinePreview?url=aHR0cDovLzEyNC43MC4yMDQuMTI2OjgwODAvamVlY2ctYm9vdC9zeXMvY29tbW9uL3N0YXRpYy90ZW1wL%2Ba1i%2BivlemihOiniGRfMTY4MTcyMzAwNjQ2OC5kb2M%3D");
              //_self.previewVisible = true;
              _self.$forceUpdate();
            })
          }
        }
      },
      /**
       * 根据文件名后缀区分 文件类型
       *
       * @param: fileName - 文件名称
       * @param: 数据返回 1) 无后缀匹配 - false
       * @param: 数据返回 2) 匹配图片 - image
       * @param: 数据返回 3) 匹配 txt - txt
       * @param: 数据返回 4) 匹配 excel - excel
       * @param: 数据返回 5) 匹配 word - word
       * @param: 数据返回 6) 匹配 pdf - pdf
       * @param: 数据返回 7) 匹配 ppt - ppt
       * @param: 数据返回 8) 匹配 视频 - video
       * @param: 数据返回 9) 匹配 音频 - radio
       * @param: 数据返回 10) 其他匹配项 - other
       */
      matchFileType(fileName) {
        // 后缀获取
        let suffix = '';
        // 获取类型结果
        let result = '';
        if (!fileName) return false;
        try {
          // 截取文件后缀
          suffix = fileName.substr(fileName.lastIndexOf('.') + 1, fileName.length)
          // 文件后缀转小写，方便匹配
          suffix = suffix.toLowerCase()
        } catch (err) {
          suffix = '';
        }
        // fileName无后缀返回 false
        if (!suffix) {
          result = false;
          return result;
        }
        let fileTypeList = [
          // 图片类型
          {
            'typeName': 'image',
            'types': ['png', 'jpg', 'jpeg', 'bmp', 'gif']
          },
          // 文本类型
          {
            'typeName': 'txt',
            'types': ['txt']
          },
          // excel类型
          {
            'typeName': 'excel',
            'types': ['xls', 'xlsx']
          },
          {
            'typeName': 'word',
            'types': ['doc', 'docx']
          },
          {
            'typeName': 'pdf',
            'types': ['pdf']
          },
          {
            'typeName': 'ppt',
            'types': ['ppt']
          },
          // 视频类型
          {
            'typeName': 'video',
            'types': ['mp4', 'm2v', 'mkv']
          },
          // 音频
          {
            'typeName': 'radio',
            'types': ['mp3', 'wav', 'wmv']
          }
        ]
        // let fileTypeList = ['image', 'txt', 'excel', 'word', 'pdf', 'video', 'radio']
        for (let i = 0; i < fileTypeList.length; i++) {
          const fileTypeItem = fileTypeList[i]
          const typeName = fileTypeItem.typeName
          const types = fileTypeItem.types
          result = types.some(function(item) {
            return item === suffix;
          });
          if (result) {
            return typeName
          }
        }
        return 'other'
      },
      handleCancel() {
        this.previewVisible = false;
      },
    }
  }
</script>

<style lang="less">
  .com-content{
    display: flex;
    flex-direction: column;
  }
  .jee-hidden{display:none}
</style>